<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.mouse{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: deepskyblue;
				position: absolute;
				transform: translate(-50%,-50%);
				
			}
			.doubleCli{
				width: 100px;
				height: 100px;
				background: gray;
				margin-top: 50px;
			}
			.bg{
				background: pink;
			}
			.tank{
				width: 50px;
				height: 50px;
				background: url(img/tank.png)no-repeat;
				background-size: cover;
				margin-top: 50px;
    			position: relative;
			}
			.zidan{
				width: 10px;
				height: 16px;
				overflow: hidden;
				position: absolute;
			    left: 21px;
			    opacity: 0.3;
			    transition: 5s;
			}
			.zidan img{
				width: 100%;
				height: 100%;
				
			}
		</style>
	</head>
	<body>
		<div class="mouse"></div>
		<div class="doubleCli"></div>
		<div class="tank">
			<div class="zidan"><img src="img/zidan.png" alt="" /></div>
		</div>
		<script type="text/javascript">
		var mouse = document.querySelector(".mouse");
		var doubleCli = document.querySelector(".doubleCli");
			document.addEventListener("mousemove",function(e){
//				console.log(e);
				var x = e.clientX+"px";
				var y =e.clientY+"px";
//				console.log(x,y);
				mouse.style.top=y;
				mouse.style.left=x;
				
			})
//			 var timer = setTimeout(function(){
			 	
			var onClick=true;
			document.addEventListener("click",function(e){
				onClick=!onClick;
				if(onClick==true){
							doubleCli.classList.toggle("bg");
						}	
			})
//				console.log(onClick)
//				if(onClick==false){
//					console.log(onClick);
//					document.addEventListener("click",function(e){
//						if(onClick==true){
//							console.log("模拟双击效果");
//							clearTimeout(timer);
//						}
//					})
//				}
//			})
//			 })
			var tank = document.querySelector(".tank");
			var zidan =document.querySelector(".zidan"); 
			document.addEventListener("keydown",function(e){
				if(e.key=="Enter"){
					zidan.style.top="-200px";
					zidan.style.left="21px";
					zidan.style.opacity = "1";
				}
			})
			
		</script>
	</body>
</html>
